<template>
	<view class="reserve">
		<custom-navi :show-home="false">预订功能设置</custom-navi>
		<view class="inform">
			<view class="inform-shake" v-for="(item,index) in shakeData" :key="index">
				<view>
					{{item.title}}
					<text>
						{{item.txt}}
					</text>
				</view>
				<view class="shakeBtn">
					 <switch :checked="item.judge" @change="changeSwitch($event,index)" style="transform:scale(0.75)" color='rgba(12, 212, 211, 1)'/>
				</view>
			</view>

			
			<view class="">
				<view class="inform-bell" v-for="(item,index) in listData" :key='index'>
					<view class="inform-bell-title">
						{{item.title}}
					</view>
					<view class="inform-bell-name" @click="bell(index)">{{item.txt}}</view>
					<view class="inform-bell-icon" @click="bell(index)">
						<image src="/static/little-more.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="center">
			<view class="model">
				<view class="model-txt">
					{{modeltxt}}
				</view>
				<view class="model-btn">
					<view class="model-btn-no" @click="cancel">否</view>
					<view class="model-btn-yes" @click="confirm">是</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popups" type="center">
			<view class="model">
				<view class="model-txt">
					{{modeltxt}}
				</view>
				<view class="model-btn">
					<view class="model-btn-no" @click="cancels">否</view>
					<view class="model-btn-yes" @click="confirms">是</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import mrhardSwitch from "../../../components/mrhard-switch/mrhard-switch.vue";
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	import { getStoreFunctionDetail, saveUpdateStoreFunction} from "../../api.js"
	export default {
		components: {
			mrhardSwitch,
			uniPopup
		},
		data() {
			return {
				modeltxt: '',
				reserveStatus:'',
				automaticStatus:'',
				treatmentStatu: { checked: true },
				tag: '',
				shopId:'',
				listData: [
					{
						title: '预订保留时间',
						txt: '请选择',
						url:'/src/pages/index/pages/reserveList/index'
					},
					{
						title: '同时段最高接单数',
						txt: '请选择',
						url:'/src/pages/index/pages/reserveList/index'
					}
				],
				shakeData: [{
						title: '启用预订',
						judge: false,
						txt:''
					},
					{
						title: '开启自动接单',
						judge: false,
						txt:'（关闭后需人工确认接单）'
					}
				]
			}
		},
		onLoad() {
			const _self = this
			 uni.getStorage({
			   key: 'shopInfo',
			   success: function (res) {
				   console.log(res)
			     _self.shopId = res.data.id
			   }
			 });
			 // this.fromData()
		},
		onShow() {
			this.fromData()
		},

		methods: {
			bell(index){
				if(this.shakeData[index].judge == false){
					this.$refs.popups.open()
					this.tag = index
					this.modeltxt = index == 1?'需要启动自动接单才能操作是否启用？':'需要启动预定才能操作是否启用预定？'
				}else{
					uni.navigateTo({
					  url: this.listData[index].url+'?type='+index
					});
				}
				// uni.navigateTo({
				//   url: this.listData[index].url+'?type='+index
				// });
			},
			changeSwitch(e,index){
				console.log(e)
				let value = e.target.value
				let that = this
				this.tag = index
				this.$set(this.shakeData[index], 'judge', value)
				if (e.target.value === false) {
					if(index=='0'){
						this.modeltxt = '是否要关闭预定'
					}else{
						this.modeltxt = '是否要关闭自动接单'
					}
					this.$refs.popup.open()
				}else{
					this.modeltxt = index == 1?'是否启用自动接单？':'是否启用预定？'
					this.$refs.popups.open()
				}
			},
			confirm() {
				this.$emit('changePage', 1)
				this.$refs.popup.onTap()
				if(this.tag == '0'){
					this.reserveStatus = '0'
					this.reserve()
				}else{
					this.automaticStatus = '0'
					this.automatic()
				}
			},
			cancel() {
				this.$set(this.shakeData[this.tag], 'judge', true)
				// this.shakeData[this.tag].judge = true
				this.$refs.popup.onTap()
			},
			confirms() {
				this.$set(this.shakeData[this.tag], 'judge', true)
				this.$refs.popups.onTap()
				if(this.tag == '0'){
					this.reserveStatus = '1'
					this.reserve()
				}else{
					this.automaticStatus = '1'
					this.automatic()
				}
			},
			cancels() {
				this.$set(this.shakeData[this.tag], 'judge', false)
				// this.shakeData[this.tag].judge = truess
				this.$refs.popups.onTap()
			},
			async automatic(){
				const params = {
					storeId:this.shopId,
					automaticStatus:this.automaticStatus,
				}
				try {
				  const { data } = await saveUpdateStoreFunction(params)
				  console.log(data)
				} catch (err) {
				  if (err.code !== 200) {
					  console.log(err)
				    // return this.$utils.common.toast.fail(err.data.message);
				  }
				}
			},
			async reserve(){
				const params = {
					storeId:this.shopId,
					reserveStatus:this.reserveStatus,
				}
				try {
				  const { data } = await saveUpdateStoreFunction(params)
				  console.log(data)
				} catch (err) {
				  if (err.code !== 200) {
					  console.log(err)
				    // return this.$utils.common.toast.fail(err.data.message);
				  }
				}
			},
			async fromData(){
				const params = {
					storeId:this.shopId
				}
				
				try {
				  const { data } = await getStoreFunctionDetail(params)
				  console.log(data)
				  this.listData[0].txt = data.appointmentSaveTime + '分钟'
				  this.listData[1].txt = data.maxOrderNum + '笔'
				  if(data.automaticStatus === 1){
					  this.$set(this.shakeData[1], 'judge', true)
				  }else{
					  this.$set(this.shakeData[1], 'judge', false)
				  }
				  if(data.reserveStatus === 1){
				  	this.$set(this.shakeData[0], 'judge', true)
				  }else{
				  	 this.$set(this.shakeData[0], 'judge', false)
				  }
				} catch (err) {
				  if (err.code !== 200) {
					  console.log(err)
				    // return this.$utils.common.toast.fail(err.data.message);
				  }
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.reserve {
		height: 100vh;
		background-color: #FFFFFF;

		.model {
			width: 690rpx;
			height: 378rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 20rpx;
			position: relative;

			&-txt {
				text-align: center;
				width: 350rpx;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				opacity: 1;
				margin: 0 auto;
				padding-top: 15%;
			}

			&-btn {
				display: flex;
				width: 100%;
				padding: 30rpx 60rpx;
				position: absolute;
				bottom: 0;

				&-no {
					width: 238rpx;
					height: 88rpx;
					background: rgba(224, 224, 224, 1);
					opacity: 1;
					border-radius: 20rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(134, 134, 134, 1);
					opacity: 1;
				}

				&-yes {
					width: 238rpx;
					height: 88rpx;
					background: rgba(12, 212, 211, 1);
					opacity: 1;
					border-radius: 20rpx;
					text-align: center;
					line-height: 88rpx;
					margin-left: auto;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					opacity: 1;
				}

			}
		}

		.inform {
			&-shake {
				// margin-top: 30rpx;
				height: 114rpx;
				background: rgba(255, 255, 255, 1);
				opacity: 1;
				// line-height: 114rpx;
				padding: 0 32rpx;
				border-bottom: 1rpx solid rgba(217, 217, 217, 1);
				display: flex;
				align-items: center;

				view {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(80, 80, 80, 1);
					opacity: 1;

					text {
						color: rgba(158, 158, 158, 1);
					}

					// display: inline-block;
				}

				.shakeBtn {

					margin-left: auto;
					margin-top: 10rpx;
				}
			}

			&-bell {
				// margin-top: 30rpx;
				height: 114rpx;
				background: rgba(255, 255, 255, 1);
				opacity: 1;
				line-height: 114rpx;
				padding: 0 32rpx;
				border-bottom: 1rpx solid rgba(217, 217, 217, 1);
				display: flex;
				align-items: center;

				view {
					// display: inline-block;

				}

				&-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(80, 80, 80, 1);
					opacity: 1;
				}

				&-name {
					// float: right;
					margin-left: auto;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					opacity: 1;
				}

				&-icon {
					// float: right;
					margin-left: auto;
					margin-left: 40rpx;

					opacity: 1;

					image {
						width: 16rpx;
						height: 22rpx;
						margin-top: 48rpx;
					}
				}
			}
		}
	}
</style>
